<template>
  <div class="paying">
    <nav-bar :title="title"></nav-bar>
    <div class="pay-price">
      <span>￥{{orderInfo.order_amount||0}}</span>
    </div>
    <h5 class="pay-way">支付方式</h5>
    <van-radio-group v-model="trade_way">
      <van-cell-group>
        <van-cell title="微信支付" clickable @click="trade_way = 'mp'">
          <van-radio slot="right-icon" name="mp" checked-color="#07c160">
            <img src="/img/14.png" class="pay-way-icon" />
          </van-radio>
        </van-cell>
        <!--<van-cell title="支付宝支付" clickable @click="trade_way = '2'">-->
          <!--<van-radio slot="right-icon" name="2" checked-color="#07c160">-->
            <!--<img src="/img/13.png" class="pay-way-icon" />-->
          <!--</van-radio>-->
        <!--</van-cell>-->
        <van-cell :title="'余额支付(可用'+ userInfo.user_money +')'" clickable @click="trade_way = 'money'">
          <van-radio slot="right-icon" name="money" checked-color="#07c160" :disabled="userInfo.user_money<=0">
            <img src="/img/12.png" class="pay-way-icon" />
          </van-radio>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <div class="btns">
      <van-button type="default" class="pay" @click="orderPay">立即支付{{orderInfo.order_amount||0}}元</van-button>
      <van-radio-group v-model="isAgree" class="agree-info">
        <van-radio name="agree" checked-color="#07c160">
          我已阅读并同意
          <a href="#" class="agree-link">安妮农庄支付协议</a>
        </van-radio>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Tab, Tabs, Cell, CellGroup, RadioGroup, Radio, Button } from "vant";
import { mapActions } from "vuex";
Vue.use(Tab)
  .use(Tabs)
  .use(Cell)
  .use(CellGroup)
  .use(Button)
  .use(RadioGroup)
  .use(Radio);
export default {
  data() {
    return {
      title: '支付订单',
      isAgree: 'agree',
      trade_way: 'mp',
      orderInfo: {}
    };
  },
  components: { navBar },
  mounted(){
    this.getOrderInfo()
  },
  watch:{
    order_id(){
      this.getOrderInfo()
    },
    trade_way(v){
      if( v == 'money'&& this.userInfo.user_money ) {
        this.$toast('余额不足')
        this.trade_way = 'mp'
      }
    }
  },
  computed:{
    order_id(){
      return this.$route.query.order_id
    },
    userInfo(){
      return this.$cookie.getUserInfo()
    }
  },
  methods:{
    ...mapActions(["payCode"]),
    orderPay(){
      this.payCode({
        order_id: this.order_id,
        trade_way: this.trade_way
      }).then(res=>{
        if(this.trade_way == 'mp'){
          this.$util.wxPay({
            data: res.data.result,
            success: (res) => {
              this.$toast('支付成功')
              this.$router.push({
                name: 'allOrder'
              })
            }
          })
        }else{
          //  余额支付
          this.$toast('支付成功')
          this.$router.push({
            name: 'allOrder'
          })
        }
      }).catch(res=>{

      })
    },
    getOrderInfo(){
      this.$store.dispatch('order_detail',{
        order_id: this.order_id
      }).then(res => {
        this.orderInfo = res.data.result
      }).catch(e=>{

      })
    }
  }
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.paying {
  position: relative;
  height: 100vh;
  padding-top: 50px;
  background: rgba(247, 247, 247, 1);
  .pay-price {
    text-align: center;
    height: 100px;
    line-height: 98px;
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(227, 76, 77, 1);
    background: #fff;
  }
  .pay-way {
    position: absolute;
    top: 120px;
    width: 100%;
    height: 30px;
    // line-height: 3.333333rem;
    font-size: 0.373333rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #303030;
    padding-left: 0.4rem;
    background-color: #fff;
  }
  .van-radio-group {
    position: absolute;
    top: 150px;
    width: 100%;
    .van-cell {
      position: relative;
      height: 53px;
      .van-cell__title {
        padding-left: 70px;
        line-height: 35px;
      }
      .pay-way-icon {
        position: absolute;
        left: 15px;
        top: 0;
        transform: translate(50%, 50%);
        height: 27px;
        width: 27px;
      }
    }
  }
  .pay {
    position: absolute;
    top: 375px;
    left: 50%;
    transform: translateX(-50%);
  }
  .van-button--default {
    width: 333px;
    height: 41px;
    background: linear-gradient(
      90deg,
      rgba(1, 47, 64, 1) 0%,
      rgba(1, 47, 64, 1) 100%
    );
  }
  .van-button__text {
    width: 115px;
    height: 22px;
    font-size: 15px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
  .agree-info {
    position: absolute;
    left: 50%;
    // width: 100vh;
    // height: 50px;
    transform: translateX(-50%);
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(122, 122, 122, 1);
    .agree-link {
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #1c5d8e;
    }
    .van-radio {
      padding-left: 20px;
    }
    &.van-radio-group {
      top: 430px;
    }
  }
}
</style>
